<template>
    <div>
        <div class="time-selector">
            <el-select v-model="period" placeholder="Select" name="time">
                <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item" />
            </el-select>
        </div>
        <div class="box-chart">
            <div>
                <div class="income-bar-chart" ref="barChartBox"></div>
                <div class="classification-chart" ref="pieChartBox"></div>
            </div>
            <div class="income-item">
                <h1>{{ tableTitle }}</h1>
                <el-table :data="budgetData" style="width: 100%" border>
                    <el-table-column fixed prop="buyDate" label="日期" width="110" />
                    <el-table-column prop="typeName" label="分类" width="80" />
                    <el-table-column prop="amount" label="金额" width="80" />
                    <el-table-column prop="member" label="成员" width="80" />
                    <el-table-column prop="beneficiary" label="商家" width="120" />
                    <el-table-column prop="description" label="描述" width="120" />
                </el-table>
                <div class="paganation">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        layout="prev, pager, next" :total="total" @current-change="getTableData" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, watchEffect } from 'vue'
import * as echarts from 'echarts'
import getPeriod from '@/utils/getPeriod'
const props = defineProps(['barChartData', 'pieChartData', 'budgetData', 'budgetType', 'total', 'analyseText'])
const emit = defineEmits(['timeChange', 'pageChange'])
let tableTitle = ref('')
let barChartTitle = ref('')
let barChartBox = ref<HTMLElement>()
let pieChartBox = ref<HTMLElement>()
let barChart = ref<echarts.ECharts | null>(null)
let pieChart = ref<echarts.ECharts | null>(null)
let currentPage = ref(1)
const pageSize = 5
let period = ref('本月')
const options = ['本月', '上月', '今年', '去年']
let isShowAnalyse = computed(() => {
    if (period.value == '本月' || period.value == '上月')
        return false
    else return true
})
let judgeText = computed(() => {
    if (props.budgetType === 0)
        return '收入'
    else return '支出'
})
const barChartOptions = {
    title: {
        text: barChartTitle.value,
        left: ' 40 %'
    },
    xAxis: {
        type: 'category',
        data: props.barChartData.date
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: props.barChartData.amount,
            type: 'bar'
        }
    ]
}
const pieChartOptions = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '各收入总览',
            type: 'pie',
            // radius: ['40%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: props.pieChartData
        }
    ]
}
const getTableData = () => {
    console.log('pagechange')
    const time = getPeriod(period.value)
    emit('pageChange', currentPage.value, pageSize, time.startTime, time.endTime)
}
watch(() => props.budgetType, () => {
    if (props.budgetType == 0) {
        tableTitle.value = '收入记录'
        barChartTitle.value = '收入总览'
    } else {
        tableTitle.value = '支出记录'
        barChartTitle.value = '支出总览'
    }
}, {
    immediate: true
})
watch(period, () => {
    const time = getPeriod(period.value)
    emit('timeChange', time.startTime, time.endTime)
})
watch([() => props.barChartData.date, () => props.barChartData.amount], () => {
    barChartOptions.xAxis.data = props.barChartData.date
    barChartOptions.series[0].data = props.barChartData.amount
    if (barChart.value)
        barChart.value.setOption(barChartOptions)
})

watch(() => props.pieChartData, () => {
    pieChartOptions.series[0].data = props.pieChartData
    console.log(props.pieChartData)
    if (pieChart.value) {
        pieChart.value.setOption(pieChartOptions)
    }
}, { deep: true })
watch([period, currentPage], () => {
    const time = getPeriod(period.value)
    emit('pageChange', currentPage.value, pageSize, time.startTime, time.endTime)
})
onMounted(() => {
    const time = getPeriod(period.value)
    emit('timeChange', time.startTime, time.endTime)
    emit('pageChange', currentPage.value, pageSize, time.startTime, time.endTime)
    barChart.value = echarts.init(barChartBox.value)
    barChartOptions.title.text = barChartTitle.value
    barChart.value?.setOption(barChartOptions)
    pieChartOptions.series[0].name = '各' + barChartTitle.value
    pieChart.value = echarts.init(pieChartBox.value)
    pieChart.value?.setOption(pieChartOptions)
})

</script>

<style scoped lang="scss">
.time-selector {
    height: 6%;
    width: 120px;
    margin-top: 5px;
    margin-left: 20px;
}

.box-chart {
    display: flex;
    flex-direction: row;


    .income-bar-chart {
        margin: 20px 20px 0 20px;
        width: 550px;
        height: 320px;
    }

    .classification-chart {
        width: 550px;
        height: 300px;
        margin-left: 20px;
    }

    .income-item {
        width: 600px;
        height: 540px;
        padding-top: 20px;

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            padding-left: 10px;
            color: rgb(101, 101, 101);
        }

        .paganation {
            margin-top: 40px;
        }
    }

    .analyse {
        position: fixed;
        right: 100px;
        bottom: 40px;
        width: 300px;
        height: 180px;
        padding: 10px;
        border: 2px solid rgb(211, 211, 211);
        border-radius: 10px;

        .tip {
            font-size: 20px;
            color: rgb(44, 127, 251);
        }

        .analyse-text {
            margin: 20px 10px;
            color: gray;
        }
    }
}
</style>